<template>
  <div class="vehicleDetails">
    <!-- 详情内容 -->
    <div class="details-content">
      <!-- 行驶证正面 -->
      <div style="display: flex;flex-wrap: nowrap;height: 300px;">
        <!-- 行驶证正面 左侧-->
        <div class="driving-license-left">
          <div class="driving-license-title">行驶证正面</div>
          <div style="margin-left: 20px;">
            <el-upload
              action=""
              list-type="picture-card"
              :disabled="true"
              :file-list="licenseFirstImgArray"
              :limit="limitNum"
              :class="{hide:frontImgEdit}"
            />
          </div>
        </div>
        <!-- 行驶证正面 右侧-->
        <div class="driving-license-right">
          <div style="margin: 20px;">
            <el-form
              ref="form"
              :model="detailsFrontForm"
              :rules="detailsFrontRules"
              label-width="120px"
            >
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="车牌号：" prop="licenseNo">
                    <el-input v-model="detailsFrontForm.licenseNo" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="使用性质：" prop="useNature">
                    <el-input v-model="detailsFrontForm.useNature" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="车牌颜色：" prop="licenseColour">
                    <el-input v-model="detailsFrontForm.licenseColour" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆所有人：" prop="owner">
                    <el-input v-model="detailsFrontForm.owner" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="行驶证住址：" prop="licenseAddress">
                    <el-input v-model="detailsFrontForm.licenseAddress" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆识别代码：">
                    <el-input v-model="detailsFrontForm.identificationCode" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="发证机关：">
                    <el-input v-model="detailsFrontForm.licenceIssuingAuthority" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆类型全称：">
                    <el-input v-model="detailsFrontForm.typeFullName" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="注册日期：">
                    <el-input v-model="detailsFrontForm.licenceRegisterTime" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发证日期：">
                    <el-input v-model="detailsFrontForm.certificateTime" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 行驶证背面 -->
      <div style="display: flex;flex-wrap: nowrap;height: 230px;">
        <!-- 行驶证背面 左侧-->
        <div class="driving-license-left">
          <div class="driving-license-title">行驶证背面</div>
          <div style="margin-left: 20px;">
            <el-upload
              action=""
              list-type="picture-card"
              :disabled="true"
              :file-list="licenseSecondImgArray"
              :class="{hide:backImgEdit}"
              :limit="limitNum"
            />
          </div>
        </div>
        <!-- 行驶证背面 右侧-->
        <div class="driving-license-right">
          <div style="margin: 20px;">
            <el-form ref="form" :model="detailsBackForm" :rules="detailsBackRules" label-width="120px">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="额定载重：" prop="ratedLoad">
                    <el-input v-model="detailsBackForm.ratedLoad" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆载重：" prop="weight">
                    <el-input v-model="detailsBackForm.weight" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="强制报废期：" prop="mandatoryScrappingTime">
                    <el-input v-model="detailsBackForm.mandatoryScrappingTime" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="档案编号：" prop="fileNo">
                    <el-input v-model="detailsBackForm.fileNo" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="车辆能源类型：">
                    <el-select v-model="detailsBackForm.energyTypeId" style="width: 100%;" disabled placeholder="车辆能源类型">
                      <el-option label="柴油" value="0" />
                      <el-option label="汽油" value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 道路运输证 -->
      <div style="display: flex;flex-wrap: nowrap;height: 260px;">
        <!-- 道路运输证 左侧-->
        <div class="driving-license-left">
          <div class="driving-license-title">道路运输证</div>
          <div style="margin-left: 20px;">
            <el-upload
              action=""
              list-type="picture-card"
              :disabled="true"
              :file-list="transportLicenseImgArray"
              :limit="limitNum"
              :class="{hide:drivingLicenseImgEdit}"
            />
          </div>
        </div>
        <!-- 道路运输证 右侧-->
        <div class="driving-license-right">
          <div style="margin: 20px;">
            <el-form
              ref="form"
              :model="roadTransportFrom"
              :rules="roadTransportRules"
              label-width="140px"
            >
              <el-form-item label="道路运输证编号：" prop="transportLicenseNo">
                <el-input v-model="roadTransportFrom.transportLicenseNo" style="width: 50%;" :disabled="true" />
              </el-form-item>
              <el-form-item label="有效期起：" prop="transportLicenseStartTime">
                <el-input v-model="roadTransportFrom.transportLicenseStartTime" style="width: 50%;" :disabled="true" />
              </el-form-item>
              <el-form-item label="有效期至：" prop="transportLicenseEndTime">
                <el-input v-model="roadTransportFrom.transportLicenseEndTime" style="width: 50%;" :disabled="true" />
              </el-form-item>
              <el-form-item label="是否有效：" disabled prop="transportLicenseStatus">
                <!-- <el-input v-model="roadTransportFrom.transportLicenseStatus"></el-input> -->
                <el-radio v-model="roadTransportFrom.transportLicenseStatus" label="ACTIVE">有效</el-radio>
                <el-radio v-model="roadTransportFrom.transportLicenseStatus" label="INVALID">过期</el-radio>
                <el-radio v-model="roadTransportFrom.transportLicenseStatus" label="READY INVALID">即将过期</el-radio>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 操作日志 -->
      <div style="height: 260px;">
        <!-- 操作日志 -->
        <div>
          <div class="driving-license-title">操作日志</div>
        </div>
        <div style="margin: 20px;">
          <el-table
            ref="tableKey"
            v-loading="listLoading"
            :data="list"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
          >
            <el-table-column type="index" width="50" />
            <el-table-column property="status" label="状态" width="120" />
            <el-table-column property="name" label="操作人" width="120" />
            <el-table-column property="lastUpdateTime" label="操作时间" />
            <el-table-column property="remark" label="备注" />
          </el-table>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="showDialog = false">确 定</el-button>
    </span>
  </div>
</template>
<script>
export default {
  // 接受父组件传递的值
  props: {
    detailsVisible: {
      type: Boolean,
      default: false
    },
    rowDataArray: {
      type: Array,
      default: function() {
        return []
      }
    },
    rowData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      licenseFirstImgArray: [],
      licenseSecondImgArray: [],
      transportLicenseImgArray: [],
      frontImgEdit: false,
      backImgEdit: false,
      drivingLicenseImgEdit: false,
      limitNum: 1, // 图片数量
      list: [],
      tableKey: 0,
      listLoading: true,
      // 控制弹出框显示隐藏
      showDialog: false,
      roadTransportFrom: {
        transportLicenseNo: '',
        transportLicenseStartTime: '',
        transportLicenseEndTime: '',
        transportLicenseStatus: ''
      },
      roadTransportRules: {
        transportLicenseNo: [{ required: true, message: '请填写道路运输证编号', trigger: 'blur' }],
        transportLicenseStartTime: [{ required: true, message: '请填写有效期起', trigger: 'blur' }],
        transportLicenseEndTime: [{ required: true, message: '请填写有效期至', trigger: 'blur' }]
      },
      detailsFrontForm: {
        licenseNo: '',
        useNature: '',
        licenseColour: '',
        owner: '',
        licenseAddress: '',
        identificationCode: '',
        licenceIssuingAuthority: '',
        typeFullName: '',
        licenceRegisterTime: '',
        certificateTime: ''
      },
      detailsFrontRules: {
        licenseNo: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
        useNature: [{ required: true, message: '请填写使用性质', trigger: 'blur' }],
        licenseColour: [{ required: true, message: '请填写车牌颜色', trigger: 'blur' }],
        owner: [{ required: true, message: '请填写车辆所有人', trigger: 'blur' }],
        licenseAddress: [{ required: true, message: '请填写行驶证住址', trigger: 'blur' }]
      },
      detailsBackForm: {
        ratedLoad: '',
        weight: '',
        mandatoryScrappingTime: '',
        fileNo: '',
        energyTypeId: ''
      },
      detailsBackRules: {
        ratedLoad: [{ required: true, message: '请填写额定载重', trigger: 'blur' }],
        mandatoryScrappingTime: [{ required: true, message: '请填写强制报废期', trigger: 'blur' }]
      }
    }
  },
  watch: {

  },
  created() {
    console.log('页面加载获取车辆详情', this.rowData)
    console.log('日志查询', this.rowDataArray)
    this.showDialog = this.detailsVisible
    this.list = this.rowDataArray
    var licenseFirstImg = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + this.rowData.licenseFirstImg
    this.licenseFirstImgArray.push({
      url: licenseFirstImg,
      status: 'transportLicenseImg'
    })
    console.log('详情图片', this.licenseFirstImg)
    // this.licenseFirstImg = this.rowData.licenseFirstImg;
    var licenseSecondImg = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + this.rowData.licenseSecondImg
    this.licenseSecondImgArray.push({
      url: licenseSecondImg,
      status: 'licenseSecondImg'
    })
    var transportLicenseImg = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + this.rowData.transportLicenseImg
    this.transportLicenseImgArray.push({
      url: transportLicenseImg,
      status: 'transportLicenseImg'
    })
    if (this.licenseFirstImgArray.length === 1 && this.licenseSecondImgArray.length === 1 && this.transportLicenseImgArray.length === 1) {
      this.frontImgEdit = true
      this.backImgEdit = true
      this.drivingLicenseImgEdit = true
    } else {
      this.frontImgEdit = false
      this.backImgEdit = false
      this.drivingLicenseImgEdit = false
    }
    this.detailsFrontForm = {
      licenseNo: this.rowData.licenseNo,
      useNature: this.rowData.useNature,
      licenseColour: this.rowData.licenseColour,
      owner: this.rowData.owner,
      licenseAddress: this.rowData.licenseAddress,
      identificationCode: this.rowData.identificationCode,
      licenceIssuingAuthority: this.rowData.licenceIssuingAuthority,
      typeFullName: this.rowData.typeFullName,
      licenceRegisterTime: this.rowData.licenceRegisterTime,
      certificateTime: this.rowData.certificateTime
    }
    this.detailsBackForm = {
      ratedLoad: this.rowData.ratedLoad,
      weight: this.rowData.weight,
      mandatoryScrappingTime: this.rowData.mandatoryScrappingTime,
      fileNo: this.rowData.fileNo,
      energyTypeId: this.rowData.energyTypeId
    }
    this.roadTransportFrom = {
      transportLicenseNo: this.rowData.transportLicenseNo,
      transportLicenseStartTime: this.rowData.transportLicenseStartTime,
      transportLicenseEndTime: this.rowData.transportLicenseEndTime,
      transportLicenseStatus: this.rowData.transportLicenseStatus
    }
  },
  methods: {
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit('changeShow', 'false')
    },
    handleCurrentChange(val) {
      this.currentRow = val
    }
  }

}
</script>
<style lang="scss">
.vehicleDetails{
  padding: 30px 0;
  .hide .el-upload--picture-card {
        display: none;
      }
    .details-content {
        border: 1px solid #E4E4E4;
        width: 95%;
        margin: 0 auto;
        height: 1000px;
    }

    .driving-license-left {
        border-bottom: 1px solid #E4E4E4;
        border-right: 1px solid #E4E4E4;
        width: 35%;
    }

    .driving-license-title {
        border-left: 2px solid #FFB500;
        width: 100px;
        text-align: center;
        font-size: 16px;
        margin: 20px;
    }

    .driving-license-right {
        border-bottom: 1px solid #E4E4E4;
        width: 65%;
        /* margin: 20px; */
    }
    .dialog-footer{
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
}
</style>
